<template>
	<yin-login-logo></yin-login-logo>
	<div class="sign">
		<div class="sign-head">
			<span>用户注册</span>
		</div>
		<el-form ref="signUpForm" label-width="70px" status-icon :model="registerForm" :rules="SignUpRules">
			<el-form-item prop="username" label="用户名">
				<el-input v-model="registerForm.username" placeholder="用户名"></el-input>
			</el-form-item>
			<el-form-item prop="password" label="密码">
				<el-input type="password" placeholder="密码" v-model="registerForm.password"></el-input>
			</el-form-item>
			<el-form-item prop="sex" label="性别">
				<el-radio-group v-model="registerForm.sex">
					<el-radio :label="0">女</el-radio>
					<el-radio :label="1">男</el-radio>
					<el-radio :label="2">保密</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item prop="phoneNum" label="手机">
				<el-input placeholder="手机" v-model="registerForm.phoneNum"></el-input>
			</el-form-item>
			<el-form-item prop="email" label="邮箱">
				<el-input v-model="registerForm.email" placeholder="邮箱"></el-input>
			</el-form-item>
			<el-form-item prop="emailCode" label="验证码">
				<div style="display: flex; justify-content: space-between">
					<el-input v-model="registerForm.emailCode" placeholder="验证码" style="width: 50%"></el-input>
					<el-button
						style="width: 45%"
						@click="getcode()"
						:disabled="Number(registerForm.btntitle) == Number(registerForm.btntitle) ? true : false"
					>
						{{ registerForm.btntitle }}</el-button
					>
				</div>
			</el-form-item>
			<el-form-item prop="birth" label="生日">
				<el-date-picker
					type="date"
					placeholder="选择日期"
					v-model="registerForm.birth"
					style="width: 100%"
				></el-date-picker>
			</el-form-item>
			<el-form-item prop="introduction" label="签名">
				<el-input type="textarea" placeholder="签名" v-model="registerForm.introduction"></el-input>
			</el-form-item>
			<el-form-item prop="location" label="地区">
				<el-select v-model="registerForm.location" placeholder="地区" style="width: 100%">
					<el-option v-for="item in AREA" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item class="sign-btn">
				<el-button @click="gologin()">登录</el-button>
				<el-button type="primary" @click="handleSignUp(formRef)">确定</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script lang="ts">
import { defineComponent, reactive, getCurrentInstance, ref } from "vue";
import mixin from "@/mixins/mixin";
import YinLoginLogo from "@/components/layouts/YinLoginLogo.vue";
import { HttpManager } from "@/api";
import { getBirth } from "@/utils";
import { AREA, RouterName, NavName, SignUpRules } from "@/enums";
import { useRouter } from "vue-router";

export default defineComponent({
	components: {
		YinLoginLogo,
	},
	setup() {
		const { proxy } = getCurrentInstance();
		const { routerManager, changeIndex } = mixin();
		const router = useRouter();
		const registerForm = reactive({
			username: "",
			password: "",
			sex: "",
			phoneNum: "",
			email: "",
			emailCode: "",
			birth: new Date(),
			introduction: "",
			location: "",
			btntitle: "获取验证码",
		});
		const getcode = () => {
			if (registerForm.email != "") {
				HttpManager.getcode(registerForm)
					.then((result) => {
						console.log(result);
						registerForm.btntitle = "120";
						const time = setInterval(() => {
							if (Number(registerForm.btntitle) > 1) {
								registerForm.btntitle = String(Number(registerForm.btntitle) - 1);
							} else {
								registerForm.btntitle = "重新获取验证码";
								clearInterval(time);
							}
						}, 1000);
					})
					.catch((err) => {
						throw err;
					});
			} else {
				(proxy as any).$message({
					message: "请先输入邮箱",
					type: "warning",
				});
			}
		};
		async function handleSignUp() {
			let canRun = true;
			(proxy.$refs["signUpForm"] as any).validate((valid) => {
				if (!valid) return (canRun = false);
			});
			if (!canRun) return;

			try {
				const username = registerForm.username;
				const password = registerForm.password;
				const sex = registerForm.sex;
				const phoneNum = registerForm.phoneNum;
				const email = registerForm.email;
				const birth = registerForm?.birth;
				const introduction = registerForm.introduction;
				const location = registerForm.location;
				const code = registerForm.emailCode;
				const result = (await HttpManager.SignUp({
					username,
					password,
					sex,
					phoneNum,
					email,
					code,
					birth,
					introduction,
					location,
				})) as ResponseBody;
				(proxy as any).$message({
					message: result.message,
					type: result.type,
				});

				if (result.success) {
					changeIndex(NavName.SignIn);
					routerManager(RouterName.SignIn, { path: RouterName.SignIn });
				}
			} catch (error) {
				console.error(error);
			}
		}
		const gologin = () => {
			router.replace("/sign-in");
		};
		return {
			SignUpRules,
			AREA,
			registerForm,
			handleSignUp,
			getcode,
			gologin,
		};
	},
});
</script>

<style lang="scss" scoped>
@import "@/assets/css/sign.scss";
</style>
